<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="author" content="yb">
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="Expires" content="0">
    <!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="../../style/js/jquery.pagination.js"></script>
    <link rel="stylesheet" href="../../style/css/base.css">
</head>

<body>
    <!-- <button class="button1">button1</button>
    <button class="button2" onclick="info()">button2</button> -->
    <h4>#p1</h4>
    <div id="nav-box">
        <ul class="pagination" id="p1"></ul>
    </div>
    <h4>#p2</h4>
    <div id="nav-box">
        <ul class="pagination" id="p2"></ul>
    </div>
    <h4>#p3</h4>
    <div id="nav-box">
        <ul class="pagination" id="p3"></ul>
    </div>
    <h4>#p4</h4>
    <div id="nav-box">
        <ul class="pagination" id="p4"></ul>
    </div>
</body>
<script>
    // $('.button1').click(function(){
    //     $('.button2').click();
    // })
    // function info(){
    //     alert('点击了button2')
    // }
    $('#p1').pagination({
        totalData: 80,
        showData: 5
    });
    $('#p2').pagination({
        totalData: 100,
        showData: 5,
        coping: true,
        current: 6
    });
    $('#p3').pagination({
        totalData: 100,
        showData: 5,
        coping: true,
        callback: function (i) {
            $('#logBox').append('<p>当前页码为：' + i + '</p>');
        }
    }, function (api) {
        $('#logBox').append('<p>*当前页码为：' + api.getCurrent() + '</p>');
        $('#logBox').append('<p>*当前总页数：' + api.getTotalPage() + '</p>');
    });
</script>